這系列文幾年前我就想寫的東西，無奈我當時根本不懂網頁程式在幹麻，就一直延到現在。現在寫完了之後，覺得終於把心理的一些石頭給放下了。

這系列文主要目的，是讓給程式人或心理人知道，在網路上做心理學研究是可能的。此系列文的文章，可以拆成這幾個部份來看

關卡〇、基礎知識篇

這邊簡單介紹了，網頁程式主要由 HTML、CSS、JavaScript 這三種語言組成。以及在編寫程式時，會需要一個文字編輯器方便進行開發。

• [給心理人的前端網頁開發] 01 前言：參賽目的
• [給心理人的前端網頁開發] 02 背景知識介紹
• [給心理人的前端網頁開發] 03 關卡〇：新手入門之說聲 Hello World
• [給心理人的前端網頁開發] 04 關卡〇：簡介 HTML
• [給心理人的前端網頁開發] 05 關卡〇：簡介 CSS
• [給心理人的前端網頁開發] 06 關卡〇：簡介 JavaScript
• [給心理人的前端網頁開發] 07 關卡〇：簡介開發環境

關卡一、寫一個自介履歷

工欲善其事，必先力其器。忘了在網頁上呈現想要的畫面，因此 HTML 跟 CSS 是不可少的，並採用了 codesandbox 當作開發環境。我們請來的知名 VTuber HowB8 來擔任主角，用 HTML 跟 CSS 在網頁上介紹各種 HowB8 的豐功偉業。

• [給心理人的前端網頁開發] 08 自介履歷之開發環境 - codesandbox
• [給心理人的前端網頁開發] 09 關卡一：自介履歷之 HTML
• [給心理人的前端網頁開發] 10 關卡一：自介履歷之 CSS
• [給心理人的前端網頁開發] 11 關卡一：也許你不需要自己手刻履歷 - 各種履歷工具

關卡二、寫一個網路問卷

問卷，是量化的心理學研究收集資料時常用的一種方式。網頁上要呈現畫面，因此需要有 HTML 跟 CSS；要儲存資料，因此要有資料庫；為了要把網頁的資料送往資料庫、以及需要從資料庫取出資料，因此要有後端。

• [給心理人的前端網頁開發] 12 關卡二：心理學研究工具與問卷
• [給心理人的前端網頁開發] 13 關卡二：網路問卷的程式架構介紹
• [給心理人的前端網頁開發] 14 關卡二：網路問卷 - 用 Google Sheet 當資料庫
• [給心理人的前端網頁開發] 15 關卡二：網路問卷 - 用 Google App Script 當後端
• [給心理人的前端網頁開發] 16 關卡二：網路問卷 - 在 CodeSandBox 上寫前端網頁問卷
• [給心理人的前端網頁開發] 17 關卡二：網路問卷 - 也許你不需要手刻網路問卷

關卡三、寫一個網路實驗

實驗，量化心理學研究另外一種常用來收集資料的方式。想在網路上進行心理學實驗，一樣會需要前端、後端跟資料庫互相合作，最後還需要統計軟體去整理與分析資料。

• [給心理人的前端網頁開發] 18 關卡三：網路心理學實驗 - 實驗方法介紹
• [給心理人的前端網頁開發] 19 關卡三：網路實驗 - jsPsych Hello World
• [給心理人的前端網頁開發] 20 關卡三：網路實驗 - jsPsych Hello World 解說
• [給心理人的前端網頁開發] 21 關卡三：網路實驗 - CDN、下載、NPM 差別
• [給心理人的前端網頁開發] 22 關卡三：網路實驗 - jsPsych Demo Simple Reaction Time Task
• [給心理人的前端網頁開發] 23 關卡三：網路實驗 - jsPsych Demo Simple Reaction Time Task 解釋
• [給心理人的前端網頁開發] 24 關卡三：網路實驗 - jsPsych Demo Simple Reaction Time Task 資料解讀
• [給心理人的前端網頁開發] 25 關卡三：網路實驗 - jsPsych Stroop effect
• [給心理人的前端網頁開發] 26 關卡三：網路實驗 - jsPsych Stroop effect 程式面
• [給心理人的前端網頁開發] 27 關卡三：網路實驗 - jsPsych Stroop effect 資料面講解
• [給心理人的前端網頁開發] 28 關卡三：網路實驗 - jsPsych Eye Tracking
• [給心理人的前端網頁開發] 29 也許你不需要手刻網路實驗：心理學研究軟體方案整理

結語

感謝有緣人的收看。在心理學研究與網頁/軟體開發上，我都還滿資淺的；文中有許多不足之處，還請多指教。但想到我終於把放在心中許久的、這混了兩個領域的東西寫出來了，覺得還是小有成就感哈哈。

未來可能會再加賽幾篇，例如心理資訊學、開放科學，以及台灣的哪些老師可能有關注類似的東西。

給心理人的前端網頁開發，我們有緣再會